<template>
    <div class="box">
        <div class="search">
            <el-input class="search-input" v-model="params.searchString" placeholder="请输入搜索内容" clearable
                @keyup.enter="loadAppointmentRecords" />
            <div class="search-status">
                <span>状态：</span>
                <el-select v-model="params.status" placeholder="" style="width: 90px">
                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"
                        @click="loadAppointmentRecords" />
                </el-select>
            </div>
            <el-button class="search-btn" type="primary" @click="loadAppointmentRecords">搜索</el-button>
        </div>
        <div class="records">
            <div v-for="item in appointmentRecords" class="record">
                <div class="record-title">
                    <div>就诊时间：{{ item.date }} {{ item.start_time }}-{{ item.end_time }}</div>
                    <div class="record-status">
                        <span class="point">•</span>
                        <span class="status">
                            <span v-if="item.status == 0">待后台确认您的预约</span>
                            <span v-else-if="item.status == 1">待就诊</span>
                            <span v-else-if="item.status == 2">就诊中</span>
                            <span v-else-if="item.status == 3">已就诊</span>
                            <span v-else-if="item.status == 4">已取消</span>
                        </span>
                    </div>
                </div>
                <div class="record-content">
                    <div class="info">
                        <p>
                            <span class="name">医疗机构</span>
                            <span class="content">{{ item.institution }}</span>
                        </p>
                        <p>
                            <span class="name">科室名称</span>
                            <span class="content">{{ item.department }}</span>
                        </p>
                        <p>
                            <span class="name">医生姓名</span>
                            <span class="content">{{ item.doctor }}</span>
                        </p>
                        <p>
                            <span class="name">挂号费用</span>
                            <span class="content fee">￥{{ item.fee }}</span>
                        </p>
                    </div>
                    <div class="btn">
                        <el-button v-if="item.status == 0 || item.status == 1" type="warning"
                            @click="showCancelAppointment(item)">取消预约</el-button>
                        <el-button v-if="item.status == 3" type="primary" plain
                            @click="showEvaluate(item)">就诊评价</el-button>
                        <el-button v-if="item.status == 3" type="success"
                            @click="showMedicalHistory(item)">查看病历</el-button>
                        <el-button v-if="item.status == 3" type="success"
                            @click="showPrescription(item)">查看处方</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页区域 -->
        <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
            background layout="total, prev, pager, next" :total="params.total" @current-change="handleCurrentChange" />
    </div>
    <!-- 取消预约弹窗 -->
    <el-dialog v-model="showCancelWindow" title="确认取消预约吗？" width="400">
        <div class="cancel-appoint">
            <p v-text="'医疗机构：' + curAppointment.institution"></p>
            <p v-text="'预约科室：' + curAppointment.department"></p>
            <p v-text="'预约医生：' + curAppointment.doctor"></p>
            <p v-text="'预约时间：' + curAppointment.date + '&nbsp;&nbsp;&nbsp;' + curAppointment.start_time.substring(0, 5) + '-' +
                curAppointment.end_time.substring(0, 5)">
            </p>
            <p v-text="'您的姓名：' + curAppointment.name"></p>
            <p v-text="'身份证号：' + curAppointment.id_card"></p>
            <p v-text="'电话号码：' + curAppointment.phone"></p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="cancelAppointment(curAppointment)">确认取消</el-button>
                <el-button @click="showCancelWindow = false">保持预约</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 查看病历弹窗 -->
    <el-dialog v-model="showMedicalHistoryWindow" title="" :width="dialogWidth">
        <div class="history">
            <div class="title">
                <h2 v-text="curMedicalHistory.institution" class="p1"></h2>
                <h1 v-text="'门诊病历'" class="p2"></h1>
            </div>
            <div class="title-info">
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">编号</span>：
                        <span class="value" v-text="curMedicalHistory.id"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">姓名</span>：
                        <span class="value" v-text="curMedicalHistory.resident"></span>
                    </div>
                </div>
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">性别</span>：
                        <span class="value" v-if="curMedicalHistory.gender == 1">男</span>
                        <span class="value" v-else>女</span>
                    </div>
                    <div class="info-item">
                        <span class="label">年龄</span>：
                        <span class="value" v-text="curMedicalHistory.age"></span>
                    </div>
                </div>
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">科室</span>：
                        <span class="value" v-text="curMedicalHistory.department"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">证件</span>：
                        <span class="value" v-text="curMedicalHistory.id_card"></span>
                    </div>
                </div>
            </div>
            <hr>
            <div class="history-content">
                <div class="content-item">
                    <span class="label">主诉</span>：
                    <span class="value" v-text="curMedicalHistory.chief_complaint"></span>
                </div>
                <div class="content-item">
                    <span class="label">现病史</span>：
                    <span class="value" v-text="curMedicalHistory.present_illness"></span>
                </div>
                <div class="content-item">
                    <span class="label">既往病史</span>：
                    <span class="value" v-text="curMedicalHistory.past_medical_history"></span>
                </div>
                <div class="content-item">
                    <span class="label">手术历史</span>：
                    <span class="value" v-text="curMedicalHistory.past_surgical_history"></span>
                </div>
                <div class="content-item">
                    <span class="label">诊断</span>：
                    <span class="value" v-text="curMedicalHistory.diagnosis"></span>
                </div>
                <div class="content-item">
                    <span class="label">治疗方案</span>：
                    <span class="value" v-text="curMedicalHistory.treatment"></span>
                </div>
                <div class="content-item">
                    <span class="label">医生备注</span>：
                    <span class="value" v-text="curMedicalHistory.notes"></span>
                </div>
            </div>
            <div class="doctor">
                <div class="item">
                    <span>医生</span>：
                    <span v-text="curMedicalHistory.doctor"></span>
                </div>
                <div class="item">
                    <span>日期</span>：
                    <span v-text="curMedicalHistory.visit_date"></span>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showMedicalHistoryWindow = false">返回</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 查看处方弹窗 -->
    <el-dialog v-model="showPrescriptionWindow" title="" :width="dialogWidth">
        <div class="history prescription">
            <div class="title">
                <h2 v-text="curMedicalHistory.institution" class="p1"></h2>
                <h1 v-text="'处方笺'" class="p2"></h1>
            </div>
            <div class="prescription-number">
                <div class="info-item">
                    <span class="label">处方编号</span>：
                    <span class="value" v-text="curPrescription.id"></span>
                </div>
            </div>
            <hr>
            <div class="title-info">
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">病历号</span>：
                        <span class="value" v-text="curMedicalHistory.id"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">姓名</span>：
                        <span class="value" v-text="curMedicalHistory.resident"></span>
                    </div>
                </div>
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">性别</span>：
                        <span class="value" v-if="curMedicalHistory.gender == 1">男</span>
                        <span class="value" v-else>女</span>
                    </div>
                    <div class="info-item">
                        <span class="label">年龄</span>：
                        <span class="value" v-text="curMedicalHistory.age"></span>
                    </div>
                </div>
                <div class="info_column">
                    <div class="info-item">
                        <span class="label">科室</span>：
                        <span class="value" v-text="curMedicalHistory.department"></span>
                    </div>
                    <div class="info-item">
                        <span class="label">开具日期</span>：
                        <span class="value" v-text="curPrescription.makeDate"></span>
                    </div>
                </div>
            </div>
            <hr>
            <div class="history-content">
                <h2>Rp.</h2>
                <div class="content-item" v-if="curMedications.length > 0" v-for="(item, index) in curMedications">
                    <div class="item">
                        <div class="item-top">
                            <div class="medication">
                                <span class="value" v-text="index + 1 + '：' + item.name"></span>
                                <span class="value" v-text="item.specification"></span>
                            </div>
                            <div class="count">
                                ×
                                <span class="value" v-text="item.count"></span>
                                <span class="value" v-text="item.unit"></span>
                            </div>
                        </div>
                        <div class="item-bottom">
                            用法：<span class="value" v-text="item.dosage"></span>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="line-bottom">
            <div class="prescription-doctor">
                <div class="item">
                    <span>医生</span>：
                    <span v-text="curMedicalHistory.doctor"></span>
                </div>
                <div class="item">
                    <span>药费</span>：
                    <span v-text="curPrescription.totalPrice.toFixed(2) + '元'"></span>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showPrescriptionWindow = false">返回</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 就诊评价弹窗 -->
    <el-dialog v-model="showEvaluateWindow" title="就诊评价" :width="dialogWidth">
        <div class="evaluate">
            <div v-if="evaluateStatus == 'browse'">
                <div class="evaluate-and-del">
                    <el-rate v-model="evaluateParam.score" :colors="colors" :texts="texts" show-text disabled />
                    <img src="@\assets\imgs\清空购物车.png" alt="删除评价" title="删除评价" class="clear-img"
                        @click="dialogVisible = true">
                </div>
                <el-dialog v-model="dialogVisible" :before-close="handleClose" :width="dialogWidthSmall">
                    <div class="dialog-content">
                        <p>您确定要删除该评价吗？</p>
                    </div>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="deleteEvaluate()">确定</el-button>
                        <div class="dialog-footer">
                        </div>
                    </template>
                </el-dialog>
                <el-input class="evaluate-content" v-model="evaluateParam.content"
                    :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="🖊说说体验怎么样~" disabled />
            </div>
            <div v-else>
                <el-rate v-model="evaluateParam.score" :colors="colors" :texts="texts" show-text />
                <el-input class="evaluate-content" v-model="evaluateParam.content"
                    :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="🖊说说体验怎么样~" />
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button v-if="evaluateStatus == 'browse'" type="primary"
                    @click="this.evaluateStatus = 'edit'">修改</el-button>
                <el-button v-else type="primary" @click="evaluate()">确定</el-button>
                <el-button @click="showEvaluateWindow = false">返回</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { appointmentRecordsFindAPI, cancelAppointmentAPI } from '@/api/appointment';
import { addEvaluateAPI, deleteEvaluateRecordAPI, findEvaluateAPI } from '@/api/evaluate';
import { medicalHistoryFindAPI } from '@/api/medicalHistory';
import { prescriptionFindByAppointmentIdAPI } from '@/api/prescription';
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            params: {
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id,
                // 搜索关键词
                searchString: '',
                status: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            appointmentRecords: [],
            showCancelWindow: false,
            showMedicalHistoryWindow: false,
            showPrescriptionWindow: false,
            curAppointment: {
                resident_id: JSON.parse(sessionStorage.getItem('user')).user_id,
                name: JSON.parse(sessionStorage.getItem('user')).name,
                id_card: JSON.parse(sessionStorage.getItem('user')).id_card,
                phone: JSON.parse(sessionStorage.getItem('user')).phone,
                schedule_id: ''
            },
            curMedicalHistory: {},
            curPrescription: {},
            medicalHistoryParam: { appointment_id: '' },
            prescriptionParam: { appointmentId: '' },
            curMedications: [],
            statusOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '待确认'
                },
                {
                    value: '1',
                    label: '待就诊'
                },
                {
                    value: '2',
                    label: '就诊中'
                },
                {
                    value: '3',
                    label: '已就诊'
                },
                {
                    value: '4',
                    label: '已取消'
                }
            ],
            dialogWidth: '700px',
            dialogWidthSmall: '400px',
            showEvaluateWindow: false,
            score: 0,
            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            texts: ['非常不满意', '较差', '一般', '满意', '非常满意'],
            content: '',
            evaluateParam: {
                appointmentId: '',
                score: 0,
                content: ''
            },
            evaluateStatus: '',
            dialogVisible: false
        }
    },
    methods: {
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadAppointmentRecords();
        },
        searchmedication() {
            this.handleCurrentChange(1);
        },
        loadAppointmentRecords() {
            appointmentRecordsFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.appointmentRecords = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        showCancelAppointment(row) {
            this.curAppointment.id = row.id;
            this.curAppointment.institution = row.institution;
            this.curAppointment.department = row.department;
            this.curAppointment.doctor = row.doctor;
            this.curAppointment.date = row.date;
            this.curAppointment.start_time = row.start_time;
            this.curAppointment.end_time = row.end_time;
            this.curAppointment.status = row.status;
            this.curAppointment.schedule_id = row.schedule_id;
            this.showCancelWindow = true;
        },
        cancelAppointment(curAppointment) {
            curAppointment.tradeNo = "预约" + curAppointment.id;
            cancelAppointmentAPI(curAppointment).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadAppointmentRecords();
                    this.showCancelWindow = false;
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            });


            // axios.get('http://127.0.0.1:8081/alipay/refund', {
            //     tradeNo: "预约" + curAppointment.id
            // }).then((resp) => {
            //     if (resp.data.code == 2000) {
            //         this.loadAppointmentRecords();
            //         this.showCancelWindow = false;
            //         ElMessage.success(resp.data.message);
            //     } else {
            //         ElMessage.error(resp.data.message);
            //     }
            // }).catch((error) => {
            //     ElMessage.error("请求失败，请稍后再试");
            // });


            // cancelAppointmentAPI(curAppointment).then((resp) => {
            //     if (resp.data.code == 2000) {
            //         this.loadAppointmentRecords();
            //         this.showCancelWindow = false;
            //         ElMessage.success(resp.data.message);
            //     } else {
            //         ElMessage.error(resp.data.message);
            //     }
            // });
        },
        showMedicalHistory(row) {
            this.medicalHistoryParam.appointment_id = row.id;
            this.searchMedicalHistory();
        },
        showPrescription(row) {
            this.medicalHistoryParam.appointment_id = row.id;
            this.prescriptionParam.appointmentId = row.id;
            this.searchPrescription();
        },
        searchMedicalHistory() {
            medicalHistoryFindAPI(this.medicalHistoryParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.curMedicalHistory = resp.data.data;
                    // 将日期转换为年月日
                    let date = new Date(this.curMedicalHistory.visit_date);
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    let formattedDate = `${year}年${month}月${day}日`;
                    this.curMedicalHistory.visit_date = formattedDate;
                    this.showMedicalHistoryWindow = true;
                }
                else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        searchPrescription() {
            medicalHistoryFindAPI(this.medicalHistoryParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.curMedicalHistory = resp.data.data;
                    // 将日期转换为年月日
                    let date = new Date(this.curMedicalHistory.visit_date);
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    let formattedDate = `${year}年${month}月${day}日`;
                    this.curMedicalHistory.visit_date = formattedDate;
                }
                else {
                    ElMessage.error(resp.data.message);
                }
            })
            prescriptionFindByAppointmentIdAPI(this.prescriptionParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.curPrescription = resp.data.data;
                    this.curMedications = resp.data.datas;
                    // 将日期转换为年月日
                    let date = new Date(this.curPrescription.makeDate);
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    let formattedDate = `${year}年${month}月${day}日`;
                    this.curPrescription.makeDate = formattedDate;
                    this.curPrescription.totalPrice = this.curMedications.reduce((pre, cur) => {
                        return pre + cur.price * cur.count;
                    }, 0);
                    this.showPrescriptionWindow = true;
                }
                else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        setDialogWidth() {
            if (window.innerWidth < 768) {
                this.dialogWidth = '98vw';
                this.dialogWidthSmall = '90vw';
            } else {
                this.dialogWidth = '700px';
                this.dialogWidthSmall = '400px';
            }
        },
        showEvaluate(item) {
            this.evaluateParam = {};
            this.evaluateStatus = '';
            this.showEvaluateWindow = true;
            this.evaluateParam.appointmentId = item.id;
            findEvaluateAPI(this.evaluateParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.evaluateParam = resp.data.data;
                    this.evaluateStatus = 'browse'
                }
            });
        },
        evaluate() {
            addEvaluateAPI(this.evaluateParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.showEvaluateWindow = false;
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            });
        },
        deleteEvaluate() {
            deleteEvaluateRecordAPI(this.evaluateParam).then((resp) => {
                if (resp.data.code == 2000) {
                    this.showEvaluateWindow = false;
                    this.dialogVisible = false;
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            });
        }
    },
    created() {
        this.loadAppointmentRecords();
    },
    mounted() {
        this.setDialogWidth();
        window.addEventListener('resize', this.setDialogWidth);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setDialogWidth);
    },
}
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
}

.search {
    width: 48%;
    display: flex;
    justify-content: space-between;
}

.search .search-input {
    flex: 5;
}

.search .search-status {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #606266;
    font-size: 14px;
}

.search .search-btn {
    flex: 1;
}

.records {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.record {
    padding: 10px;
    width: 100%;
}

.record .record-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: #3496ff;
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 5px 10px;
}

.record .record-title .record-status {
    display: flex;
    align-items: center;
    line-height: 20px;
}

.record .record-title .record-status .point {
    font-size: 30px;
    letter-spacing: -5px;
}

.record .record-title .record-status .status {
    font-size: 14px;

}

.record .record-content {
    width: 100%;
    height: 100%;
    align-items: start;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

.record .record-content .info .name {
    flex: 2;
    color: #aaa;
}

.record .record-content .info .content {
    margin-left: 15px;
}

.record .record-content .info .fee {
    color: rgb(255, 87, 45);
}

.record .record-content .btn {
    flex: 1;
    height: 80px;
    display: flex;
    justify-content: end;
    align-items: center;
}

.history {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.history .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
}

.history .title .p1 {
    width: 100%;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.history .title .p2 {
    font-size: 30px;
    width: 80%;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.history .title-info {
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.history .title-info .info_column {
    flex: 1;
}

.history .title-info .info_column .info-item {
    display: flex;
}

.history .title-info .info_column .info-item .label,
.history .history-content .content-item .label {
    width: 60px;
    text-align: justify;
    text-align-last: justify;
    white-space: nowrap;
}

.history .history-content {
    display: flex;
    flex-direction: column;
    width: 85%;
}

.history .history-content .content-item {
    margin: 5px 0 0 50px;
    display: flex;
}

.history .doctor {
    width: 100%;
    margin: 20px 50px 0 0;
    display: flex;
    justify-content: end;
}

.history .doctor .item {
    margin-left: 50px;
}

.history hr {
    width: 95%;
    border: #555 1px solid;
}

.prescription-number {
    width: 80%;
    display: flex;
    justify-content: end;
}

.content-item .item {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.content-item .item .item-bottom {
    margin-left: 50px;
}

.content-item .item .item-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.medication {
    width: 80%;
    display: flex;
    justify-content: space-between;
    /* 虚线 */
    border-bottom: 1px dashed #ccc;
}

.line-bottom {
    margin-top: 30px;
}

.prescription-doctor {
    width: 50%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

.evaluate-and-del {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-img {
    width: 20px;
    cursor: pointer;
    margin-left: 10px;
    opacity: 0.6;
    transition: all 0.3s;

    &:hover {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .box {
        width: 100%;
        height: 100%;
    }

    .el-card {
        width: 90vw;
        height: 100%;
    }

    .search {
        width: 90vw;
    }

    .search .search-status span {
        width: 12vw;
        display: flex;
    }

    .search .el-button {
        display: none;
    }

    .records {
        width: 96vw;
    }

    .record {
        width: 100%;
        height: 100%;
    }

    .record .record-content {
        display: flex;
        align-items: center;
    }

    .record .record-content .info {
        flex: 3;
        font-size: 16px;
    }

    .record .record-content .info p {
        width: 100%;
        margin-bottom: 5px;
    }

    .record .record-content .btn {
        flex: 1;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .record .record-content .btn .el-button {
        width: 25vw;
        margin: 5px 0;
    }

    .history .title {
        width: 60vw;
    }

    .history .title-info {
        width: 90vw;
        display: flex;
        flex-direction: column
    }

    .history .title-info .info_column {
        flex: 1;
        display: flex;
        width: 90vw;
    }

    .history .title-info .info_column .info-item {
        flex: 2;
    }

    .history .title-info .info_column .info-item:nth-child(2) {
        flex: 3;
    }

    .history .title-info .info_column .info-item .label {
        width: 10vw;
    }

    .history .history-content {
        width: 100%;
    }

    .history .history-content .content-item .label {
        width: 15vw;
    }

    .history .history-content .content-item {
        margin: 0.5vh 0 0 5vw;
    }

    .history .doctor .item {
        margin-left: 5vw;
    }

    .history hr {
        width: 100%;
    }

    .prescription .label {
        width: 60px;
        text-align: justify;
        text-align-last: justify;
        white-space: nowrap;
    }

    .prescription .title-info .info_column .info-item {
        flex: 1;
    }

    .prescription .title-info .info_column .info-item:nth-child(2) {
        flex: 1;
    }

    .prescription .title-info .info_column .info-item .label {
        width: 15vw;
    }

    .content-item .item {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .content-item .item .item-bottom {
        margin-left: 50px;
    }

    .content-item .item .item-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .medication {
        width: 80%;
        display: flex;
        justify-content: space-between;
        /* 虚线 */
        border-bottom: 1px dashed #ccc;
    }

    .line-bottom {
        margin-top: 2vh;
    }

    .prescription-doctor {
        width: 70%;
        display: flex;
        margin-top: 1vh;
        justify-content: space-between;
    }

    .evaluate-content {}
}
</style>